<template>
	<view class="main-container">
		<view class="empty-container" v-if="dataList.length == 0">
			<u-empty mode="data" text="暂无数据"></u-empty>
		</view>
		<view class="list-container" v-else>
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<view class="first-row" @click="auditShow(item.id)">
					<view class="first-content">
						<u-image width="90rpx" height="90rpx" src="/static/images/repairList/task.png"></u-image>
					</view>
					<view class="second-content">
						<view class="second-content-text">
							<span>{{item.name}}</span>
						</view>
						<view class="second-content-time">
							<view>
								<u-icon name="clock"></u-icon>
							</view>
							<view style="margin-left: 5rpx;">申请日期:</view>
							<view style="margin-left: 5rpx;">{{item.date}}</view>
						</view>
					</view>
					<view class="third-content">
						<view class="type-circle-outside">
							<view class="type-circle-inside">
								<view class="type-circle-text">
									<view v-if="item.type == 1">维保</view>
									<view v-if="item.type == 2">养护</view>
									<view v-if="item.type == 3">安防</view>
									<view v-if="item.type == 4">清洁</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="second-row">
					<u-line dashed color="#c0c4cc" length="92%"></u-line>
				</view>
				<view class="third-row">
					<u-collapse :border="collapseBorder">
						<u-collapse-item title="故障描述">
							<span>{{ item.desc }}</span>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
		<!-- 返回顶部 -->
		<view>
			<u-back-top :scroll-top="scrollTop" :iconStyle="iconStyle"></u-back-top>
		</view>
		<!-- 无网络提示 -->
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		onShow: function() {
			// 进入页面查询数据
			this.queryData()
		},
		onPullDownRefresh() {
			// 下拉查询一次列表数据
			this.queryData()
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		data() {
			return {
				// 返回顶部
				iconStyle: {
					fontSize: '38rpx',
					color: '#447aff'
				},
				scrollTop: 0,
				// 折叠面板
				collapseBorder: false,
				dataList: [{
					'id': '01',
					'name': '列表第一项',
					'date': '2023-03-02',
					'type': '1',
					'desc': '描述信息'
				}, {
					'id': '02',
					'name': '列表第二项',
					'date': '2023-03-02',
					'type': '2',
					'desc': '描述信息'
				}, {
					'id': '03',
					'name': '列表第三项',
					'date': '2023-03-02',
					'type': '3',
					'desc': '描述信息'
				}, {
					'id': '04',
					'name': '列表第四项',
					'date': '2023-03-02',
					'type': '4',
					'desc': '描述信息'
				}, {
					'id': '05',
					'name': '列表第五项',
					'date': '2023-03-02',
					'type': '3',
					'desc': '描述信息'
				}, {
					'id': '06',
					'name': '列表第六项',
					'date': '2023-03-02',
					'type': '2',
					'desc': '描述信息'
				}, {
					'id': '07',
					'name': '列表第七项',
					'date': '2023-03-02',
					'type': '1',
					'desc': '描述信息'
				}, {
					'id': '08',
					'name': '列表第八项',
					'date': '2023-03-02',
					'type': '3',
					'desc': '描述信息'
				}, {
					'id': '09',
					'name': '列表第九项',
					'date': '2023-03-02',
					'type': '3',
					'desc': '描述信息'
				}, {
					'id': '10',
					'name': '列表第十项',
					'date': '2023-03-02',
					'type': '3',
					'desc': '描述信息'
				}]
			}
		},
		methods: {
			// 查询
			queryData() {},
			// 页面跳转
			auditShow(data) {
				uni.navigateTo({
					url: './audit?auditId=' + data
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss">
	.main-container {
		width: 100%;
		height: 100%;

		.empty-container {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.list-container {

			.list-item {
				margin: 20rpx;
				background-color: #ffffff;

				.first-row {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;

					.first-content {
						width: 20%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.second-content {
						width: 55%;

						.second-content-text {
							color: #000000;
							font-weight: bold;
							font-size: 32rpx;
						}

						.second-content-time {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							margin-top: 15rpx;
						}
					}

					.third-content {
						width: 25%;
						display: flex;
						justify-content: center;
						align-items: center;

						.type-circle-outside {
							width: 112rpx;
							height: 112rpx;
							border-radius: 50%;
							border: 1px dashed #19be6b;
							display: flex;
							justify-content: center;
							align-items: center;

							.type-circle-inside {
								width: 100rpx;
								height: 100rpx;
								background-color: #dbfbdb;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							.type-circle-text {
								color: #19be6b;
								font-size: 25rpx;
							}
						}
					}
				}

				.second-row {
					display: flex;
					justify-content: space-around;
				}

				.third-row {}
			}
		}
	}
</style>
